<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合测试页面 - API测试工具</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🧪</text></svg>">
    <style>
        .test-summary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        .test-results {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }
        .test-result-card {
            background: white;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .test-result-card h4 {
            margin: 0 0 10px 0;
            color: #495057;
        }
        .test-status {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
        }
        .test-status.passed {
            background: #d4edda;
            color: #155724;
        }
        .test-status.failed {
            background: #f8d7da;
            color: #721c24;
        }
        .test-status.pending {
            background: #fff3cd;
            color: #856404;
        }
        .debug-log {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 5px;
            padding: 15px;
            margin: 20px 0;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            max-height: 300px;
            overflow-y: auto;
        }
        .debug-log .log-entry {
            margin: 2px 0;
            padding: 2px 0;
        }
        .debug-log .log-entry.info {
            color: #0066cc;
        }
        .debug-log .log-entry.success {
            color: #28a745;
        }
        .debug-log .log-entry.error {
            color: #dc3545;
        }
        .debug-log .log-entry.warning {
            color: #ffc107;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 测试摘要 -->
        <div class="test-summary">
            <h1>🧪 综合测试页面</h1>
            <p>验证API测试工具的所有功能是否正常工作</p>
            <div class="test-results">
                <div class="test-result-card">
                    <h4>Tab切换功能</h4>
                    <span class="test-status pending" id="tabSwitchStatus">待测试</span>
                </div>
                <div class="test-result-card">
                    <h4>事件监听器</h4>
                    <span class="test-status pending" id="eventListenersStatus">待测试</span>
                </div>
                <div class="test-result-card">
                    <h4>DOM元素</h4>
                    <span class="test-status pending" id="domElementsStatus">待测试</span>
                </div>
                <div class="test-result-card">
                    <h4>CSS样式</h4>
                    <span class="test-status pending" id="cssStylesStatus">待测试</span>
                </div>
            </div>
        </div>

        <!-- 导航标签 -->
        <nav class="nav-tabs">
            <button class="nav-tab active" data-tab="quick">⚡ 快速测试</button>
            <button class="nav-tab" data-tab="models">📦 模型API</button>
            <button class="nav-tab" data-tab="subscriptions">🔔 订阅API</button>
            <button class="nav-tab" data-tab="servers">🖥️ 服务器API</button>
            <button class="nav-tab" data-tab="websocket">🔌 WebSocket</button>
            <button class="nav-tab" data-tab="batch">📋 批量操作</button>
        </nav>

        <!-- 快速测试标签页 -->
        <div id="quick-tab" class="tab-content active">
            <div class="section-header">
                <h2>⚡ 快速测试</h2>
                <button class="btn btn-primary" id="runComprehensiveTestBtn">🚀 运行综合测试</button>
            </div>
            
            <div class="test-grid">
                <div class="test-card">
                    <div class="test-header">
                        <h3>🔧 Tab切换测试</h3>
                        <button class="btn btn-sm" id="testTabSwitchingBtn">测试</button>
                    </div>
                    <div class="test-body" id="tabSwitchingResult">
                        <div class="test-placeholder">点击测试按钮开始</div>
                    </div>
                </div>

                <div class="test-card">
                    <div class="test-header">
                        <h3>🎯 事件监听器测试</h3>
                        <button class="btn btn-sm" id="testEventListenersBtn">测试</button>
                    </div>
                    <div class="test-body" id="eventListenersResult">
                        <div class="test-placeholder">点击测试按钮开始</div>
                    </div>
                </div>

                <div class="test-card">
                    <div class="test-header">
                        <h3>📋 DOM元素测试</h3>
                        <button class="btn btn-sm" id="testDomElementsBtn">测试</button>
                    </div>
                    <div class="test-body" id="domElementsResult">
                        <div class="test-placeholder">点击测试按钮开始</div>
                    </div>
                </div>

                <div class="test-card">
                    <div class="test-header">
                        <h3>🎨 CSS样式测试</h3>
                        <button class="btn btn-sm" id="testCssStylesBtn">测试</button>
                    </div>
                    <div class="test-body" id="cssStylesResult">
                        <div class="test-placeholder">点击测试按钮开始</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 模型API标签页 -->
        <div id="models-tab" class="tab-content">
            <div class="section-header">
                <h2>📦 模型API测试</h2>
            </div>
            <p>这是模型API标签页的内容。</p>
        </div>

        <!-- 订阅API标签页 -->
        <div id="subscriptions-tab" class="tab-content">
            <div class="section-header">
                <h2>🔔 订阅API测试</h2>
            </div>
            <p>这是订阅API标签页的内容。</p>
        </div>

        <!-- 服务器API标签页 -->
        <div id="servers-tab" class="tab-content">
            <div class="section-header">
                <h2>🖥️ 服务器API测试</h2>
            </div>
            <p>这是服务器API标签页的内容。</p>
        </div>

        <!-- WebSocket标签页 -->
        <div id="websocket-tab" class="tab-content">
            <div class="section-header">
                <h2>🔌 WebSocket测试</h2>
            </div>
            <p>这是WebSocket标签页的内容。</p>
        </div>

        <!-- 批量操作标签页 -->
        <div id="batch-tab" class="tab-content">
            <div class="section-header">
                <h2>📋 批量操作测试</h2>
            </div>
            <p>这是批量操作标签页的内容。</p>
        </div>

        <!-- 调试日志 -->
        <div class="debug-log" id="debugLog">
            <div class="log-entry info">[系统] 综合测试页面已加载</div>
        </div>
    </div>

    <script>
        let currentTab = 'quick';
        let testResults = {
            tabSwitching: false,
            eventListeners: false,
            domElements: false,
            cssStyles: false
        };

        // 调试日志函数
        function debugLog(message, type = 'info') {
            const logContainer = document.getElementById('debugLog');
            const timestamp = new Date().toLocaleTimeString('zh-CN');
            const logEntry = document.createElement('div');
            logEntry.className = `log-entry ${type}`;
            logEntry.innerHTML = `[${timestamp}] ${message}`;
            logContainer.appendChild(logEntry);
            logContainer.scrollTop = logContainer.scrollHeight;
        }

        // 更新测试状态
        function updateTestStatus(testName, passed) {
            const statusElement = document.getElementById(`${testName}Status`);
            if (statusElement) {
                statusElement.textContent = passed ? '通过' : '失败';
                statusElement.className = `test-status ${passed ? 'passed' : 'failed'}`;
            }
            testResults[testName] = passed;
        }

        // Tab切换函数
        function switchTab(tabName) {
            debugLog(`🔄 切换到Tab: ${tabName}`, 'info');
            
            try {
                // 隐藏所有标签页
                document.querySelectorAll('.tab-content').forEach(tab => {
                    tab.classList.remove('active');
                });
                
                // 移除所有标签按钮的激活状态
                document.querySelectorAll('.nav-tab').forEach(btn => {
                    btn.classList.remove('active');
                });
                
                // 显示目标标签页
                const targetTab = document.getElementById(`${tabName}-tab`);
                if (targetTab) {
                    targetTab.classList.add('active');
                    debugLog(`✅ 显示标签页: ${targetTab.id}`, 'success');
                } else {
                    debugLog(`❌ 未找到标签页: ${tabName}-tab`, 'error');
                }
                
                // 激活对应的标签按钮
                const targetBtn = document.querySelector(`[data-tab="${tabName}"]`);
                if (targetBtn) {
                    targetBtn.classList.add('active');
                    debugLog(`✅ 激活按钮: ${targetBtn.getAttribute('data-tab')}`, 'success');
                } else {
                    debugLog(`❌ 未找到按钮: data-tab="${tabName}"`, 'error');
                }
                
                currentTab = tabName;
                debugLog(`✅ Tab切换完成: ${tabName}`, 'success');
                return true;
                
            } catch (error) {
                debugLog(`❌ Tab切换失败: ${error.message}`, 'error');
                console.error('Tab切换错误:', error);
                return false;
            }
        }

        // 测试Tab切换功能
        function testTabSwitching() {
            debugLog('🧪 开始测试Tab切换功能...', 'info');
            const resultContainer = document.getElementById('tabSwitchingResult');
            resultContainer.innerHTML = '<div class="loading">测试中...</div>';
            
            let testPassed = true;
            const tabs = ['quick', 'models', 'subscriptions', 'servers', 'websocket', 'batch'];
            
            // 测试每个tab
            tabs.forEach((tabName, index) => {
                setTimeout(() => {
                    const success = switchTab(tabName);
                    if (!success) testPassed = false;
                    
                    if (index === tabs.length - 1) {
                        // 最后回到quick tab
                        setTimeout(() => {
                            switchTab('quick');
                            updateTestStatus('tabSwitching', testPassed);
                            resultContainer.innerHTML = `
                                <div class="test-result ${testPassed ? 'success' : 'error'}">
                                    <h4>${testPassed ? '✅ 测试通过' : '❌ 测试失败'}</h4>
                                    <p>已测试 ${tabs.length} 个标签页的切换功能</p>
                                </div>
                            `;
                        }, 500);
                    }
                }, index * 300);
            });
        }

        // 测试事件监听器
        function testEventListeners() {
            debugLog('🧪 开始测试事件监听器...', 'info');
            const resultContainer = document.getElementById('eventListenersResult');
            resultContainer.innerHTML = '<div class="loading">测试中...</div>';
            
            let testPassed = true;
            const navTabs = document.querySelectorAll('.nav-tab');
            
            if (navTabs.length === 0) {
                testPassed = false;
                debugLog('❌ 未找到导航标签按钮', 'error');
            } else {
                debugLog(`✅ 找到 ${navTabs.length} 个导航标签按钮`, 'success');
                
                // 检查每个按钮是否有事件监听器
                navTabs.forEach((tab, index) => {
                    const tabName = tab.getAttribute('data-tab');
                    if (!tabName) {
                        testPassed = false;
                        debugLog(`❌ 按钮 ${index} 缺少data-tab属性`, 'error');
                    } else {
                        debugLog(`✅ 按钮 ${index}: ${tabName}`, 'success');
                    }
                });
            }
            
            updateTestStatus('eventListeners', testPassed);
            resultContainer.innerHTML = `
                <div class="test-result ${testPassed ? 'success' : 'error'}">
                    <h4>${testPassed ? '✅ 测试通过' : '❌ 测试失败'}</h4>
                    <p>检查了 ${navTabs.length} 个导航标签按钮</p>
                </div>
            `;
        }

        // 测试DOM元素
        function testDomElements() {
            debugLog('🧪 开始测试DOM元素...', 'info');
            const resultContainer = document.getElementById('domElementsResult');
            resultContainer.innerHTML = '<div class="loading">测试中...</div>';
            
            let testPassed = true;
            const requiredElements = [
                { id: 'quick-tab', name: '快速测试标签页' },
                { id: 'models-tab', name: '模型API标签页' },
                { id: 'subscriptions-tab', name: '订阅API标签页' },
                { id: 'servers-tab', name: '服务器API标签页' },
                { id: 'websocket-tab', name: 'WebSocket标签页' },
                { id: 'batch-tab', name: '批量操作标签页' }
            ];
            
            let foundElements = 0;
            requiredElements.forEach(element => {
                const el = document.getElementById(element.id);
                if (el) {
                    foundElements++;
                    debugLog(`✅ 找到元素: ${element.name}`, 'success');
                } else {
                    testPassed = false;
                    debugLog(`❌ 未找到元素: ${element.name}`, 'error');
                }
            });
            
            updateTestStatus('domElements', testPassed);
            resultContainer.innerHTML = `
                <div class="test-result ${testPassed ? 'success' : 'error'}">
                    <h4>${testPassed ? '✅ 测试通过' : '❌ 测试失败'}</h4>
                    <p>找到 ${foundElements}/${requiredElements.length} 个必需元素</p>
                </div>
            `;
        }

        // 测试CSS样式
        function testCssStyles() {
            debugLog('🧪 开始测试CSS样式...', 'info');
            const resultContainer = document.getElementById('cssStylesResult');
            resultContainer.innerHTML = '<div class="loading">测试中...</div>';
            
            let testPassed = true;
            const requiredClasses = [
                'nav-tab',
                'tab-content',
                'active'
            ];
            
            let foundClasses = 0;
            requiredClasses.forEach(className => {
                const elements = document.getElementsByClassName(className);
                if (elements.length > 0) {
                    foundClasses++;
                    debugLog(`✅ 找到样式类: ${className} (${elements.length} 个元素)`, 'success');
                } else {
                    testPassed = false;
                    debugLog(`❌ 未找到样式类: ${className}`, 'error');
                }
            });
            
            updateTestStatus('cssStyles', testPassed);
            resultContainer.innerHTML = `
                <div class="test-result ${testPassed ? 'success' : 'error'}">
                    <h4>${testPassed ? '✅ 测试通过' : '❌ 测试失败'}</h4>
                    <p>找到 ${foundClasses}/${requiredClasses.length} 个必需样式类</p>
                </div>
            `;
        }

        // 运行综合测试
        function runComprehensiveTest() {
            debugLog('🚀 开始运行综合测试...', 'info');
            
            // 重置所有测试状态
            Object.keys(testResults).forEach(key => {
                testResults[key] = false;
                updateTestStatus(key, false);
            });
            
            // 依次运行所有测试
            setTimeout(() => testTabSwitching(), 100);
            setTimeout(() => testEventListeners(), 200);
            setTimeout(() => testDomElements(), 300);
            setTimeout(() => testCssStyles(), 400);
            
            // 显示最终结果
            setTimeout(() => {
                const passedTests = Object.values(testResults).filter(result => result).length;
                const totalTests = Object.keys(testResults).length;
                debugLog(`🎯 综合测试完成: ${passedTests}/${totalTests} 项测试通过`, passedTests === totalTests ? 'success' : 'warning');
            }, 2000);
        }

        // 设置事件监听器
        function setupEventListeners() {
            debugLog('🔧 设置事件监听器...', 'info');
            
            // Tab切换事件监听器
            document.querySelectorAll('.nav-tab').forEach(tab => {
                tab.addEventListener('click', function() {
                    const tabName = this.getAttribute('data-tab');
                    debugLog(`🖱️ 点击Tab按钮: ${tabName}`, 'info');
                    switchTab(tabName);
                });
            });
            
            // 测试按钮事件监听器
            document.getElementById('testTabSwitchingBtn')?.addEventListener('click', testTabSwitching);
            document.getElementById('testEventListenersBtn')?.addEventListener('click', testEventListeners);
            document.getElementById('testDomElementsBtn')?.addEventListener('click', testDomElements);
            document.getElementById('testCssStylesBtn')?.addEventListener('click', testCssStyles);
            document.getElementById('runComprehensiveTestBtn')?.addEventListener('click', runComprehensiveTest);
            
            debugLog('✅ 事件监听器设置完成', 'success');
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            debugLog('🚀 页面加载完成，开始初始化...', 'info');
            setupEventListeners();
            debugLog('✅ 初始化完成', 'success');
        });
    </script>
</body>
</html>


